import React, { useState } from 'react';
import { Button, Form, Input, DatePicker, Select, Card, Row, Col, message } from 'antd';
import '../components.css';
import { CloseCircleOutlined, SaveOutlined } from '@ant-design/icons';
import CollectionsService from '../../services/CollectionsService';
import { Link, useNavigate } from 'react-router-dom';

const { Option } = Select;

export default function AddCollection() {
  const [form] = Form.useForm();
  const navigate = useNavigate();
  const [loading, setLoading] = useState(false);

  const onFinish = async (values) => {
    try {
      setLoading(true);
      await CollectionsService.createCollection({
        ...values,
        collectionDate: values.collectionDate.format('YYYY-MM-DD')
      });
      message.success('回款记录创建成功');
      navigate('/collectionlist');
    } catch (error) {
      message.error('创建回款记录失败');
      console.error(error);
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className='add-collection-container'>
      <Card
        title="添加回款记录"
        bordered={false}
        headStyle={{ borderBottom: '1px solid #f0f0f0', padding: '0 24px' }}
        bodyStyle={{ padding: '24px' }}
      >
        <Form
          form={form}
          name="collectionForm"
          layout="vertical"
          onFinish={onFinish}
          autoComplete="off"
        >
          <Row gutter={24}>
            <Col span={12}>
              <Form.Item
                label="关联订单ID"
                name="orderId"
                rules={[{ required: true, message: '请输入关联订单ID!' }]}
              >
                <Input placeholder="请输入8位订单ID" />
              </Form.Item>

              <Form.Item
                label="回款日期"
                name="collectionDate"
                rules={[{ required: true, message: '请选择回款日期!' }]}
              >
                <DatePicker style={{ width: '100%' }} />
              </Form.Item>

              <Form.Item
                label="回款期次"
                name="period"
                rules={[{ required: true, message: '请输入回款期次!' }]}
              >
                <Input placeholder="例：第1期" />
              </Form.Item>

              <Form.Item
                label="回款金额"
                name="amount"
                rules={[{ required: true, message: '请输入回款金额!' }]}
              >
                <Input prefix="¥" placeholder="0.00" />
              </Form.Item>
            </Col>

            <Col span={12}>
              <Form.Item
                label="付款方式"
                name="paymentMethod"
                rules={[{ required: true, message: '请选择付款方式!' }]}
                initialValue="现金"
              >
                <Select>
                  <Option value="现金">现金</Option>
                  <Option value="银行转账">银行转账</Option>
                  <Option value="支付宝">支付宝</Option>
                  <Option value="微信支付">微信支付</Option>
                </Select>
              </Form.Item>

              <Form.Item
                label="审批状态"
                name="approvalStatus"
                rules={[{ required: true, message: '请选择审批状态!' }]}
                initialValue="待审批"
              >
                <Select>
                  <Option value="待审批">待审批</Option>
                  <Option value="已通过">已通过</Option>
                  <Option value="被否决">被否决</Option>
                  <Option value="被驳回">被驳回</Option>
                  <Option value="已撤销">已撤销</Option>
                </Select>
              </Form.Item>

              <Form.Item
                label="逾期状态"
                name="overdueStatus"
                rules={[{ required: true, message: '请选择逾期状态!' }]}
                initialValue="正常"
              >
                <Select>
                  <Option value="正常">正常</Option>
                  <Option value="逾期">逾期</Option>
                </Select>
              </Form.Item>
            </Col>
          </Row>

          <Form.Item style={{ marginTop: '24px' }}>
            <Button 
              type="primary" 
              htmlType="submit" 
              icon={<SaveOutlined />}
              loading={loading}
              style={{ marginRight: '16px' }}
            >
              提交
            </Button>
            <Button 
              danger 
              icon={<CloseCircleOutlined />}
            >
              <Link to="/collectionlist">取消</Link>
            </Button>
          </Form.Item>
        </Form>
      </Card>
    </div>
  );
}